/**
 * 地图绘制相关，目前设想；
 * 点线面绘制
 * 自由绘制
 * 规则图形绘制
 * 图形编辑
 * geojson 输入与输出
 *
 * 后记；经过6个小时研究，决定放弃再次封装绘制，理由如下:
 * 1. 对于 es6 class 使用不熟悉，使用时经常会不确定
 * 2. 封装时出现BUG，返回验证无法修复，待下次再修复
 * 3. openlayers api 功能足够详细简单，使用简单
 * 4. 具体封装成什么样，还不明确
 * 5. 使用面向对象的概念，但构建一个什么样的对象，有哪些属性，哪些方法，哪些表现，不够清晰
 * 6. es5 es6 写法都已尝试，不知道为什么不能移除事件···
 *
 * 大后记：第二天下午调试，找到原因，解决了
 * 1. 上午读了一些 openlayers 和 vue next 源码，发现其实可以从项目中调试库源代码
 * 2. 断点调试后，发现 vue3 会将代理的结果直接传进来，无法找到 proxy 的内容
 * 3. 百度之后，使用 toRow 方法获取原始对象，即可
 */

import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
import { Draw, Modify, Snap } from 'ol/interaction';
import { Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';

class DrawTool {
	constructor(map) {
		this.source_ = new VectorSource();
		this.vector_ = new VectorLayer({
			source: this.source_,
			style: new Style({
				fill: new Fill({
					color: 'rgba(255, 255, 255, 0.2)',
				}),
				stroke: new Stroke({
					color: '#ffcc33',
					width: 2,
				}),
				image: new CircleStyle({
					radius: 7,
					fill: new Fill({
						color: '#ffcc33',
					}),
				}),
			}),
		});

		this.map_ = map;
		this.map_.addLayer(this.vector_);

		this.draw_ = null;
		this.modify_ = null;
		this.snap_ = null;
	}

	onDraw(type) {
		if (this.draw_) {
			console.log('结束上次类型绘制');
			this.map_.removeInteraction(this.draw_);
		}

		this.draw_ = new Draw({ source: this.source_, type: type });
		this.map_.addInteraction(this.draw_);

		this.draw_.on('drawstart', () => {
			console.log('开始绘制');
		});

		this.draw_.on('drawend', () => {
			console.log('结束绘制');
		});
	}

	onModify() {
		this.modify_ = new Modify({ source: this.source_ });
		this.map_.addInteraction(this.modify_);

		this.modify_.on('modifystart', () => {
			console.log('开始编辑');
		});

		this.modify_.on('modifyend', () => {
			console.log('结束编辑');
		});
	}

	onSnap() {
		this.snap_ = new Snap({ source: this.source_ });
		this.map_.addInteraction(this.snap_);
	}

	clearDraw() {
		this.source_.clear();
		if (this.draw_) {
			this.map_.removeInteraction(this.draw_);
			this.draw_ = null;
		}
		if (this.modify_) {
			this.map_.removeInteraction(this.modify_);
			this.modify_ = null;
		}
		if (this.snap_) {
			this.map_.removeInteraction(this.snap_);
			this.snap_ = null;
		}
	}
}

export default DrawTool;
